<template>
	<view class="container">
		
		<checkbox-group @change="buyChange" v-if="dataList.length != 0">
			<view class="tui-cart-cell  tui-mtop" v-for="(item,index) in dataList" :key="index">
				<tui-swipe-action :actions="actions" @click="handlerButton" :params="item">
					<template v-slot:content>
						<view class="tui-goods-item">
							<label class="tui-checkbox">
								<checkbox :value="item.id" :checked="item.selected" color="#fff"></checkbox>
							</label>
							<image :src="item.productInfo.image" class="tui-goods-img" mode=""></image>
							<view class="tui-goods-info">
								<view class="tui-goods-title ellipsis_2">{{item.productInfo.storeName}}</view>
								<view class="tui-goods-model">
									<view class="tui-model-text">{{item.attrInfo.sku}}</view>
								</view>
								<view class="tui-goods-price">
									<text class="iconfont sign">&#xe604;</text> {{item.attrInfo.price | getPrice}}
									<text> + {{item.attrInfo.integral}} 通宝</text>
								</view>
								<view class="tui-price-box">
									<tui-numberbox :value="item.cartNum" :height="20" :width="60" :min="1" :index="index" 
									@change="changeNum"></tui-numberbox>
								</view>
							</view>
						</view>
					</template>
				</tui-swipe-action>
			</view>
		</checkbox-group>
		<view class="empty" v-else>
			<view class="empty_pic">
				<image class="empty_img" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/empty.png" mode=""></image>
			</view>
			<view class="empty_txt">~ 暂无相关数据 ~</view>
			
		</view>
		
		<!--tabbar--> 
		<view class="tui-tabbar">
			<view class="">
				<checkbox-group @change="checkAll">
					<label class="tui-checkbox">
						<checkbox :checked="isAll" color="#fff"></checkbox>
						<text class="tui-checkbox-pl">全选</text>
					</label>
				</checkbox-group>
				
			</view>
			<view class="tui-checkAll">
				<view class="tui-total-price" v-if="!isEdit">合计:
					<text class="tui-bold"><text class="iconfont sign">&#xe604;
					</text>{{totalPrice | getPrice}}</text> 
					<text v-if="totalInter != 0"> + {{totalInter}} 通宝</text>
				</view>
				<view class="settle"  v-if="!isEdit" @click="btnPay">去结算</view>
				<view class="cancel" v-else @click="goCancel">删除</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				isAll: false,
				totalPrice: 0,
				cartNum: 0,
				cartIds: [], //购物车id
				actions: [
					{
						name: '删除',
						color: '#fff',
						fontsize: 28,
						width: 64,
						background: '#F82400'
					}
				],
				
				isEdit: false,
				totalInter:0
			}
		},
		filters: {
			getPrice(price) {
				price = price || 0;
				return price.toFixed(2)
			}
		},
		onLoad() {
			let that = this;
			uni.$on("shoppingCar",function(data){
				console.log('监听到事件来自 id ，携带参数 msg 为：' + data.msg);
				that.getShoppingCar();
				that.totalPrice = 0;
				that.totalInter = 0;
				that.isAll = false;
			})
			
			that.getShoppingCar();
		},
		methods: {
			// 计算总价
			calcHandle() {
				let cartNum = 0;
				let totalPrice = 0;
				let selectedNum = 0;
				let totalInter = 0;
				this.dataList.map((item) => {
					if (item.selected) {
						cartNum += item.cartNum;
						totalPrice += item.attrInfo.price * item.cartNum;
						totalInter += item.attrInfo.integral * item.cartNum
						selectedNum++
					}
				})
				this.isAll = selectedNum === this.dataList.length
				this.cartNum = cartNum
				this.totalPrice = totalPrice
				this.totalInter = totalInter
			},
			// 数量增减
			changeNum: function(e) {
				console.log(e)
				let that = this;
				that.dataList[e.index].cartNum = e.value
				that.api.shoppingCarChangeNum({
					id:that.dataList[e.index].id,
					number:that.dataList[e.index].cartNum
				}).then(res => {
					// console.log(res,"增加数量")
					setTimeout(() => {
						that.calcHandle()
					}, 0)
				})
			},
			// 向左滑动
			handlerButton: function(e) {
				console.log(e)
				let index = e.index;
				let item = e.item;
				this.tui.toast(`商品id：${item.id}，按钮index：${index}`);
				let ids = [];
				ids.push(e.item.id);
				console.log(ids)
				this.api.shoppingCarCancel({
					ids:ids
				}).then(res => {
					console.log(res)
					this.tui.toast('删除成功');
					setTimeout(function () {
						uni.$emit('shoppingCar',{msg:'页面更新'});
					},500)
				})
				
			},
			editGoods: function() {
				// #ifdef H5 || MP
				this.isEdit = !this.isEdit;
				// #endif
			},
			// 商品详情
			detail: function() {
				uni.navigateTo({
					url: '../productDetail/productDetail'
				})
			},
			// 去结算
			btnPay() {
				let cartIds = [];
				this.dataList.forEach(item => {
					if (item.selected == true) {
						cartIds.push(item.id)
					}
				})
				let cartId = cartIds.join(",");
				
				if (cartId != '') {
					uni.navigateTo({
						url: 'submitOrder/submitOrder?cartId=' + cartId,
					})
				} else {
					this.tui.toast('至少选择一个商品');
					return
				}
				
			},
			// 选择
			buyChange(e) {
				this.cartIds = e.detail.value;
				console.log(this.cartIds,"-----")
				this.dataList.map(item => {
					//如果购物车id为数字统一转成字符串
					console.log(~this.cartIds.indexOf(item.id),"YYYY")
					if (~this.cartIds.indexOf(item.id)) {
						item.selected = true;
					} else {
						item.selected = false;
					}
				})
				setTimeout(() => {
					this.calcHandle()
				}, 0)
			},
			// 全选
			checkAll(e) {
				this.isAll = !this.isAll;
				let cartNum = 0;
				let totalPrice = 0;
				let totalInter = 0;
				this.dataList.map((item) => {
					item.selected = this.isAll;
					if (this.isAll) {
						cartNum += item.cartNum;
						totalPrice += item.attrInfo.price * item.cartNum;
						totalInter += item.attrInfo.integral * item.cartNum
					}
				})
				this.totalPrice = totalPrice;
				this.totalInter = totalInter;
				this.cartNum = cartNum;
			},
			// 多个删除
			goCancel: function () {
				let cartIds = [];
				this.dataList.forEach(item => {
					if (item.selected == true) {
						cartIds.push(item.id)
					}
				})
				// let cartId = cartIds.join(",");
				this.api.shoppingCarCancel({
					ids:cartIds
				}).then(res => {
					console.log(res)
					this.tui.toast('删除成功');
					setTimeout(function () {
						uni.$emit('shoppingCar',{msg:'页面更新'});
					},500)
				})
				
			},
			// 获取购物车列表
			getShoppingCar: function () {
				this.api.shoppingCarList().then(res => {
					console.log(res)
					let dataList1 = res.data.valid;
					for (var i = 0; i < dataList1.length; i++) {
						if (dataList1[i]) {
							dataList1[i].selected = false;
							dataList1[i].id = String(dataList1[i].id) 
						}
						
					}
					this.dataList = dataList1;
					
				})
			}
			
		},
		// 右上角按钮操作
		onNavigationBarButtonTap(e) {
			this.isEdit = !this.isEdit;
			let text = this.isEdit ? "完成" : "编辑";
			// #ifdef APP-PLUS
			let webView = this.$mp.page.$getAppWebview();
			webView.setTitleNViewButtonStyle(0, {
				text: text
			});
			// #endif
		}
	}
</script>

<style>
	.container {
		padding-bottom: 120rpx;
		padding: 0 20rpx;
	}

	.tui-mtop {
		margin-top: 24rpx;
	}

	.tui-edit-goods {
		width: 100%;
		border-radius: 12rpx;
		overflow: hidden;
		padding: 24rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333;
		font-size: 24rpx;
	}

	.tui-goods-num {
		font-weight: bold;
		color: #e41f19;
	}

	.tui-cart-cell {
		width: 100%;
		border-radius: 12rpx;
		background: #FFFFFF;
		/* padding: 40rpx 0; */
		overflow: hidden;
	}

	.tui-goods-item {
		display: flex;
		padding: 40rpx 30rpx 20rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-checkbox {
		min-width: 70rpx;
		display: flex;
		align-items: center;
	}

	/* #ifdef MP-WEIXIN */
	.tui-checkbox .wx-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}

	.tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #eb0909;
		width: 44rpx !important;
		height: 44rpx !important;
		border: none;
	}

	/* #endif */
	/* #ifndef MP-WEIXIN */

	>>>.tui-checkbox .uni-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}

	>>>.tui-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background: #eb0909;
		width: 45rpx !important;
		height: 45rpx !important;
		border: none;
	}

	/* #endif */
	.tui-goods-img {
		width: 186rpx;
		height: 186rpx !important;
		border-radius: 12rpx;
		flex-shrink: 0;
		display: block;
		margin-bottom: 20rpx;
	}

	.tui-goods-info {
		width: 100%;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-goods-title {
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 24rpx;
		color: #333;
	}

	.tui-goods-model {
		max-width: 100%;
		color: #333;
		background: #F5F5F5;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
		box-sizing: border-box;
	}

	.tui-model-text {
		max-width: 100%;
		transform: scale(0.9);
		transform-origin: 0 center;
		font-size: 24rpx;
		line-height: 32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-price-box {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
	}

	.tui-goods-price {
		font-size: 30rpx;
		font-weight: 500;
		color: #E42221;
	}

	.tui-scale {
		transform: scale(0.8);
		transform-origin: 100% 100%;
	}

	.tui-activity {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx 20rpx 100rpx;
		box-sizing: border-box;
	}
	.sign {
		color: #FFDA71;
		font-size: 32rpx;
	}
	.tui-buy {
		display: flex;
		align-items: center
	}

	.tui-bold {
		font-size: 34rpx;
		color: #E42221;
		/* font-weight: bold; */
	}

	.tui-sub-info {
		max-width: 532rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		padding: 20rpx 30rpx 10rpx 30rpx;
		box-sizing: border-box;
		color: #333;
		transform: scale(0.8);
		transform-origin: 100% center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-left: auto
	}
	
	.tui-tabbar {
		width: 100%;
		height: 100rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		z-index: 99999;
	}

	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-checkAll {
		display: flex;
		align-items: center;
	}

	.tui-checkbox-pl {
		padding-left: 12rpx;
	}

	.tui-total-price {
		padding-right: 33rpx;
		font-size: 24rpx;
		color: #666666;
	}
	
	.settle {
		width: 140rpx;
		box-sizing: border-box;
		text-align: center;
		line-height: 60rpx;
		background: #E42221;
		border-radius: 200rpx;
		color: #FFFFFF;
		border: 1rpx solid #E42221;
	}
	.cancel {
		width: 140rpx;
		box-sizing: border-box;
		text-align: center;
		line-height: 60rpx;
		border: 1rpx solid #E42221;
		border-radius: 200rpx;
		color: #E42221;
	}
	.empty {
		width: 100%;
		box-sizing: border-box;
		padding-top: 60rpx;
		text-align: center;
	}
	.empty_pic {
		width: 240rpx;
		height: 240rpx;
		margin: 30rpx auto;
	}
	.empty_img {
		width: 100%;
		height: 100%;
	}
	.empty_txt {
		width: 100%;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #999999;
		letter-spacing: 3rpx;
	}
	
	
	
	
	
	
	
	
	
</style>
